<template>
    <div class="aside">
        <h1 class="logo">
            <a href="#">
                <img src="@/assets/images/logo.png" alt="">
                <span>e店邦O2O平台 </span>
            </a>
        </h1>
        <!-- 左侧的 导航菜单部分 -->
        <el-menu router unique-opened :default-active="$route.path" class="el-menu-vertical-demo" background-color="#545c64"
            text-color="#fff" active-text-color="#00d0ff">
            <el-menu-item index="/">
                <svg-icon icon-file-name="dashboard"></svg-icon>
                首页
            </el-menu-item>
            <el-submenu v-for="parent in navs" :index="parent.name">
                <template slot="title">
                    <div @click="fn(parent.path)">
                        <svg-icon :icon-file-name="parent.meta.icon"></svg-icon>
                        <span>{{ parent.meta.title }}</span>
                    </div>
                </template>
                <el-menu-item :index="parent.path + '/' + child.path" v-for="child in parent.children">{{ child.meta.title
                }}</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    data() {
        return {


        }
    },
    computed: {
        ...mapGetters({
            navs: 'user/navs'
        })
    },
    methods: {
        fn(path) {
            if (path.includes('http')) {
                // 这是要处理的不是在当前页面跳转，而是要 以新页面的方式跳转
                window.open(path)
            }
        }
    }
}
</script>
 
<style lang = "less" scoped>
.logo {

    a {
        display: flex;
        color: #fff;
        text-decoration: none;
        padding: 10px;
        justify-content: center;
        align-items: center;

        img {
            width: 40px;
        }
    }
}

.aside {
    height: 100vh;
}
</style>